<template>
	<view class="todo-manage">

		<view class="top">
			<uni-icons style="margin-left: 25rpx;" type="left" size="30" color="#9f9f9f" @click="toBackPage">
			</uni-icons>
			<view class="input">待办管理</view>
		</view>

		<view class="todo-dashbaord">
			近期待办数据分析
		</view>


		<!-- 标签栏 -->
		<view class="tags">
			<view class="tag-nav">
				<view :class="'tag-nav-item ' + (tagTypes.length == 0 ? 'tag-nav-selected' : '')" @click="changeTag(-1)">全部</view>
				<view :class="'tag-nav-item ' + (isTeam ? 'tag-nav-selected' : '')" @click="changeTag(-2)">团队</view>
				<view v-for="(item) in tags" :key="item.id">
					<view :class="'tag-nav-item ' + (tagTypes.includes(item.id) ? 'tag-nav-selected' : '')" @click="changeTag(item.id)"
						@longpress="showTodoTagEdit(item)">
						{{ item.name }}
					</view>
				</view>
				<view class="tag-nav-item add-tag" @tap="showTodoTagEdit">
					<uni-icons type="plus" size="30" color="#FFFFFF"></uni-icons>
					<view v-if="tags.length === 0">点击新建标签</view>
				</view>
			</view>
		</view>
		
		<view class="todos" v-if="!isTeam">
		
			<view class="todo" v-for="(item, index) in todoList" :key="item.id"
				:style="'background-color:'+(item.teamTodoId == null ? '#DAEFEE;' : '#D9EDFF;')">
				<view class="todo-card">
		
					<view class="todo-check" @click="finishOrCoverTodo(item.id,index)">
						<uni-icons v-if="item.status == 1" type="checkmarkempty" size="20" color="#8f8f8f"></uni-icons>
					</view>
		
					<view class="todo-info" style="width: 100%" @tap="showTodoEdit(item)"
						@longpress="deleteTodo(item.id)">
						<view class="todo-title" :class="{'todo-over' : item.status == 1 }"
							:style="'color:'+(item.teamTodoId == null ? '#378F99;' : '#2CA5D1;')">
							{{ item.title }}
						</view>
						<view :class="{'todo-over' : item.status == 1 }"
							style="display: flex; flex-direction: column; justify-content: space-between; margin-top: 8rpx">
							<view class="todo-brief" v-if="item.gmtEnd != null">
								截止时间：{{ item.gmtEnd ? item.gmtEnd : '无截止日期' }}</view>
							<view class="todo-brief" v-if="item.monitorId != null">负责人：{{ item.monitorName}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		
		<view class="todos" v-if="isTeam && teamTodoList && teamTodoList.length > 0">
			<view class="team-todo" v-for="(todos) in teamTodoList">
				<view class="team-name">{{todos.teamTitle}}</view>
				<view class="todo" v-for="(item, index) in todos.todoList" :key="item.id" style="background-color: #D9EDFF;">
					<view class="todo-card">
						<view class="todo-check" @click="finishOrCoverTodo(item.id,index)">
							<uni-icons v-if="item.status == 1" type="checkmarkempty" size="20" color="#9a9a9a"></uni-icons>
						</view>
						<view class="todo-info" style="width: 100%" @tap="showTodoEdit(item)" @longpress="deleteTodo(item.id)">
							<view class="todo-title" :class="{'todo-over' : item.status == 1 }" :style="'color:'+(item.teamTodoId == null ? '#378F99;' : '#2CA5D1;')">
								{{ item.title }}
							</view>
							<view :class="{'todo-over' : item.status == 1 }" style="display: flex; flex-direction: column; justify-content: space-between; margin-top: 8rpx">
								<view class="todo-brief" v-if="item.gmtEnd != null">截止时间：{{ item.gmtEnd ? item.gmtEnd : '无截止日期' }}</view>
								<view class="todo-brief" v-if="item.monitorId != null">负责人：{{ item.monitorName}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>


		<uni-popup ref="todoEdit" type="bottom">
			<view class="modal-box">
				<view class="modal-title">待办</view>
				<view class="modal-main">
					<view class="modal-main-item">
						<text class="modal-key">标题</text>
						<input type="text" v-model="todoInput.title" placeholder="请输入:" />
					</view>
					<view class="modal-main-item">
						<text class="modal-key">截止日期</text>
						<picker mode="date" :value="todoInput.gmtEnd" :start="today" end="2023-12-30"
							@change="bindDateChange">
							<view class="picker-input">当前选择: {{ todoInput.gmtEnd ? todoInput.gmtEnd : '无截止日期' }}</view>
						</picker>
					</view>
					<view class="modal-main-item">
						<text class="modal-key">标签</text>
						<view class="modal-tags">
							<view class="modal-tag" @tap="changeChosenTag(index)"
								:class="{'chosen-tag' : chosenTagsIndex[index]}" v-for="(item, index) in tags"
								:key="index">
								{{ item.name }}
							</view>
							<text v-if="tags.length == 0">还未添加标签噢</text>
						</view>
					</view>
				</view>
				<view class="modal-operations">
					<view class="modal-cancel" @tap="modalCancel()">取消</view>
					<view v-if="todoInput.id" @tap="removeTodoFromToday(todoInput.id)">
						{{todoInput.isToday == 0 ? '移入' : '移出'}}今日
					</view>
					<view class="modal-confirm" @tap="modalConfirm()">确定</view>
				</view>
			</view>
		</uni-popup>
		
		<uni-popup ref="todoTagEdit" type="bottom">
			<view class="modal-box">
				<view class="modal-title">待办标签</view>
				<view class="modal-main">
					<view class="modal-main-item">
						<text class="modal-key">名称</text>
						<input type="text" v-model="todoTagInput.name" placeholder="请输入:" />
					</view>
					<view v-if="todoTagInput.id" class="modal-main-button" @click="deleteTag(todoTagInput.id)">删除标签</view>
					
				</view>
				<view class="modal-operations">
					<view class="modal-cancel" @tap="tagModalCancel()">取消</view>
					<view class="modal-confirm" @tap="tagModalConfirm()">确定</view>
				</view>
			</view>
		</uni-popup>


		<view class="page-btns">
			<view class="button" @click="showTodoEdit()">
				<image src="https://www.cdn.kxcdedu.top/image/default/85118A5CE98948DD9D78170B280BCA5D-6-2.png" />
				<!-- <uni-icons @click="showTodoEdit" type="plusempty" size="30" color="#FFFFFF"></uni-icons> -->
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				todoList: [],
				teamTodoList:[],

				today: null,


				todoInput: {
					title: "",
					gmtEnd: null
				},
				todoTagInput: {
					id: null,
					name: ""
				},
				tags: [],
				tagTypes:[],
				isTeam:false,
				chosenTagsIndex: [false, false],

				paddingTop: "105rpx",
				inputHeight: "70rpx"
			}
		},
		onLoad() {
			// 调整搜索位置
			// #ifdef MP-WEIXIN
			// 1.获取屏幕可使用宽度
			let windowWidth = uni.getSystemInfoSync().windowWidth;
			// 2.获取状态栏高度
			const statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			// 3.获取胶囊按钮位置信息
			const menuButton = uni.getMenuButtonBoundingClientRect();

			// 4.计算出导航栏高度  换算成rpx
			let navHeight = (menuButton.height + (menuButton.top - statusBarHeight) * 2) * (750 / windowWidth);

			// // 5.导航栏与状态栏拉开距离  margin-top: statusBarTop + 'rpx';
			this.inputHeight = menuButton.height * (750 / windowWidth) + 'rpx';
			this.paddingTop = menuButton.top * (750 / windowWidth) + 'rpx';

			// #endif
		},
		onShow() {
			this.getMyTodoList()
			this.getMyTeamTodoList()
			this.getMyTodoTagList()
		},
		methods: {
			getMyTodoList() {
				this.$api.getMyTodoList({
					tagIds:this.tagTypes
				}).then(res => {
					this.todoList = res.data
				})
			},
			getMyTodoTagList() {
				this.$api.getMyTodoTagList().then(res => {
					this.tags = res.data
				})
			},
			getMyTeamTodoList() {
				this.$api.getMyTeamTodoList({
					tagIds:this.tagTypes
				}).then(res => {
					this.teamTodoList = res.data
					console.log(res.data)
				})
			},




			showTodoEdit(item) {
				if (item) {
					this.todoInput = item
					this.tagIdsToIndex(item.tagIds)
				} else {
					this.todoInput = {
						title: "",
						data: null
					}
				}
				this.$refs.todoEdit.open('bottom')
			},
			
			showTodoTagEdit(item){
				this.todoTagInput = item
				this.$refs.todoTagEdit.open('bottom')
			},
			

			tabSelect(index) {
				this.TabCur = index
			},


			addTodo: function() {
				this.$api.addTodo({
					title: this.todoInput.title,
					isToday: 1,
					gmtEnd: this.todoInput.gmtEnd,
					tagIds: this.indexToTagIds()
				}).then(res => {
					if(this.isTeam){
						this.getMyTeamTodoList();
					}else{
						this.getMyTodoList();
					}
				})
			},
			deleteTodo: function(id) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定删除该待办吗',
					success(res) {
						if (res.confirm) {
							that.$api.deleteTodo({
								id
							}).then(res => {
								if(that.isTeam){
									that.getMyTeamTodoList();
								}else{
									that.getMyTodoList();
								}
							})
						}
					}
				});
			},
			updateTodo: function() {
				this.$api.updateTodo({
					gmtEnd: this.todoInput.gmtEnd,
					title: this.todoInput.title,
					id: this.todoInput.id,
					tagIds: this.indexToTagIds()
				}).then(res => {
					if(this.isTeam){
						this.getMyTeamTodoList();
					}else{
						this.getMyTodoList();
					}
				})
			},
			finishOrCoverTodo(id, index) {
				if (this.todoList[index].status == 1) {
					// 发起待办恢复
					this.todoList[index].status = 0
					this.$api.recoverTodo({
						id
					}).then(res => {
						this.todoList[index].status = 0
					})
				} else {
					this.todoList[index].status = 1
					this.$api.finishTodo({
						id
					}).then(res => {
						uni.showToast({
							title: '已完成',
							duration: 500
						});
						let temp = this.todoList[index]
						this.todoList.splice(index, 1)
						this.todoList.push(temp)
					})
				}
			},
			// 移除今日待办
			removeTodoFromToday: function(id) {
				this.$api.removeTodoFromToday({
					id
				}).then(res => {
					if(this.isTeam){
						this.getMyTeamTodoList();
					}else{
						this.getMyTodoList();
					}
					uni.showToast({
						title: '成功',
						duration: 500
					});
					this.$refs.todoEdit.close('bottom')
				})
			},
			
			
			addTag: function() {
				this.$api.addTag(this.todoTagInput).then(res => {
					this.getMyTodoTagList()
				})
			},
			deleteTag: function(id) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定删除该标签吗',
					success(res) {
						if (res.confirm) {
							that.$api.deleteTag({
								id
							}).then(res => {
								that.$refs.todoTagEdit.close('bottom')
								that.getMyTodoTagList()
							})
						}
					}
				});
			},
			updateTag: function() {
				this.$api.updateTag(this.todoTagInput).then(res => {
					that.getMyTodoTagList()
				})
			},
			




			// 标签选中标记数组 -> id数组
			indexToTagIds: function() {
				let ids = [];

				for (let i = 0; i < this.chosenTagsIndex.length; i++) {
					if (this.chosenTagsIndex[i]) {
						ids.push(this.tags[i].id);
					}
				}

				return ids;
			},
			tagIdsToIndex: function(ids) {
				let chosenTagsIndex = [];
				for (let i = 0; i < this.tags.length; i++) {
					for (let id of ids) {
						if (id === this.tags[i].id) {
							chosenTagsIndex.push(true);
							break;
						}
					}
					if (chosenTagsIndex[i] != true) {
						chosenTagsIndex.push(false);
					}
				}
				this.chosenTagsIndex = chosenTagsIndex
			},




			changeChosenTag: function(chosenindex) {
				console.log(chosenindex)
				this.chosenTagsIndex[chosenindex] = !this.chosenTagsIndex[chosenindex];
				this.$forceUpdate()
			},

			bindDateChange: function(e) {
				this.todoInput.gmtEnd = e.detail.value
				this.$forceUpdate()
			},


			//点击取消
			modalCancel: function() {
				this.closeModal();
			},
			//点击确认
			modalConfirm: function(e) {
				if (this.todoInput.id != null) {
					this.updateTodo();
				} else {
					this.addTodo();
				}
				this.closeModal();
			},
			// 模态框关闭：统一清理动作
			closeModal: function() {
				this.$refs.todoEdit.close('bottom')
				this.clear();
			},
			// 表单清理
			clear: function() {
				let len = this.tags.length;
				let chosenTagsIndex = Array(len).fill(false);
				this.date = '';
				this.title = '';
				this.id = null;
				this.chosenTagsIndex = "";
			},
			
			
			
			
			
			tagModalConfirm(){
				if (this.todoTagInput.id != null) {
					this.updateTag();
				} else {
					this.addTag();
				}
				this.$refs.todoTagEdit.close('bottom')
			},
			tagModalCancel(){
				this.$refs.todoTagEdit.close('bottom')
			},



			// 切换标签
			changeTag(id) {
			    if (id != null) {
					if(id > 0){
						let index = this.tagTypes.indexOf(id)
						if(index != -1){
							this.tagTypes.splice(index,1)
						}else {
						    this.tagTypes.push(id)
						}
					}else{
						if (id === -1 ) {
							this.isTeam = false
						    this.tagTypes = []
						}
						if(id === -2 ) {
							this.isTeam = !this.isTeam
							
						}
					}
					if(this.isTeam){
						this.getMyTeamTodoList();
					}else{
						this.getMyTodoList();
					}
			    }
			},



			toBackPage() {
				uni.navigateBack()
			},
		},
		filters: {
			gmtToDate(gmt) {
				let fmt = "YYYY-mm-dd HH:MM";
				let date = new Date(parseInt(gmt));
				let ret;
				const opt = {
					"Y+": date.getFullYear().toString(), // 年
					"m+": (date.getMonth() + 1).toString(), // 月
					"d+": date.getDate().toString(), // 日
					"H+": date.getHours().toString(), // 时
					"M+": date.getMinutes().toString(), // 分
					"S+": date.getSeconds().toString(), // 秒
					// 有其他格式化字符需求可以继续添加，必须转化成字符串
				};
				for (let k in opt) {
					ret = new RegExp("(" + k + ")").exec(fmt);
					if (ret) {
						fmt = fmt.replace(
							ret[1],
							ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, "0")
						);
					}
				}
				return fmt;
			}
		}
	}
</script>

<style scoped lang="scss">
	.todo-manage {
		position: relative;
		padding: 0;
		margin: 0;
		padding-bottom: 40rpx;
		background-color: #f9f9f9;
		min-height: 100vh;


		.top {
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			top: 0;
			position: sticky;

			padding: 20rpx 0;

			padding-top: 100rpx;

			// #ifdef H5
			padding-top: 40rpx;
			// #endif

			background-color: #FFFFFF;
			border-bottom: solid thin #efefef;
			z-index: 100;


			.input {
				width: 450rpx;
				padding-left: 30rpx;
			}


		}

		.todo-dashbaord {
			width: 690rpx;
			height: 300rpx;
			margin-left: 30rpx;
			margin-top: 20rpx;
			border-radius: 20rpx;
			background-color: #FFFFFF;
			box-shadow: 0px 0px 4px 2px #f5f7f5;

			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}

		.tabs {
			margin-left: 30rpx;
			margin-top: 30rpx;
			width: 500rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;

			.tab {
				display: flex;
				flex-direction: column;
				align-items: center;
				height: 70rpx;

				.tab-text {
					font-size: 36rpx;
					color: gray;
				}

				.tab-text-on {
					font-size: 36rpx;
					font-weight: bold;
					color: #1E5D72
				}

				.tab-line {
					margin-top: 10rpx;
					width: 60rpx;
					height: 7rpx;
					border-radius: 50rpx;
					background-color: #1E5D72;
				}
			}


		}


		.tags {
			width: 690rpx;
			margin-left: 30rpx;
			margin-top: 20rpx;


			.tag-nav {
				display: flex;
				align-items: center;
				justify-content: flex-start;
				flex-wrap: wrap;

				margin: 0 auto;

				font-size: 28rpx;
			}

			.tag-nav-item {
				height: 80rpx;
				padding: 0 20rpx;
				margin: 10rpx;
				border-radius: 20rpx;
				background-color: #DAEFEE;

				line-height: 80rpx;
				text-align: center;
			}

			.tag-nav-selected {
				background: #378F99;
				color: aliceblue;
				font-weight: bold;
			}

			.tag-nav-item.add-tag {
				display: flex;
				align-items: center;

				width: fit-content;
				padding: 0 20rpx;

				font-size: 28rpx;
				color: #666;
			}
		}

		.todos {
			display: flex;
			flex-direction: column;
			position: relative;
			z-index: 2;
			width: 720rpx;
			overflow: hidden;

			margin-left: 30rpx;
			margin-top: 20rpx;
			
			.team-todo{
				
				.team-name{
					margin-bottom: 20rpx;
				}
				
			}

			.todo {

				width: 690rpx;
				box-shadow: 0px 0px 4px 2px #f5f7f5;
				padding: 25rpx 0;
				border-radius: 25rpx;
				background-color: #FFFFFF;
				margin-bottom: 30rpx;


				.todo-card {
					display: flex;
					align-items: center;


					.todo-check {
						height: 40rpx;
						width: 45rpx;
						// border: solid thin #636363;
						border-radius: 10rpx;
						margin-left: 30rpx;
						margin-right: 30rpx;
					
						display: flex;
						flex-direction: row;
						justify-content: center;
						align-items: center;
						background-color: #FFFFFF;
					}

					.todo-info {
						display: block;
					}

					.todo-title {
						font-size: 32rpx;
						font-weight: bold;
					}

					.todo-brief {
						font-size: 24rpx;
						color: rgba(30, 30, 30, 0.6);
					}

					.todo-over {
						text-decoration: line-through;
						color: #9a9a9a;
					}

					/* 待办滑动操作按钮 */
					.todo-btns {
						position: absolute;
						right: -310rpx;

						display: flex;
						justify-content: left;
						align-items: center;

						box-sizing: border-box;
						width: 300rpx;
						height: 120rpx;
						padding-left: 40rpx;

						text-align: center;
						color: #fff;
						line-height: 120rpx;
					}

					.todo-btns view {
						width: 80rpx;
						height: 120rpx;
						font-size: 28rpx;
						margin-right: 20rpx;
						border-radius: 20rpx;
					}

					.todo-btns .detail {
						background-color: #97C5FC;
					}
				}

				.todo-btns .delete {
					background-color: #f10e0e;
				}
			}
		}

		.modal-box {
			width: 600rpx;
			margin-left: 35rpx;
			margin-bottom: 400rpx;


			padding: 40rpx;
			border-radius: 20rpx;
			background: white;

			display: flex;
			flex-direction: column;
			justify-content: space-between;

			text-align: left;


			.modal-title {
				margin-bottom: 20rpx;
				font-size: 36rpx;
				font-weight: 600;
				text-align: center;
			}

			.modal-main {
				width: 100%;
				font-size: 26rpx;
				margin: 20rpx 0 40rpx;


				.modal-main-item {
					width: 100%;
					margin-bottom: 30rpx;

					.modal-key {
						display: block;

						font-size: 32rpx;
						margin-bottom: 10rpx;
					}

					/* 模态框单项：多选标签 */
					.modal-tags {
						display: flex;
						align-items: center;
						flex-wrap: wrap;

						min-height: 80rpx;
					}

					.modal-tag {
						padding: 10rpx 20rpx;
						border-radius: 10rpx;
						margin: 0 20rpx 10rpx 0;
						background-color: rgb(231, 240, 247);
					}

					.chosen-tag {
						background: darkorange;
					}

				}
				
				
				.modal-main-button {
					width: 600rpx;
					height: 60rpx;
					border-radius: 20rpx;
					background-color: #ff0000;
					box-shadow: 0px 0px 4px 2px #f5f7f5;
					margin-top: 20rpx;
				
					text-align: center;
					line-height: 60rpx;
					color: white;
					font-weight: bold;
					letter-spacing: 5rpx;
				}

				.modal input,
				.modal .picker-input {
					box-sizing: border-box;
					margin: 10rpx 0;
					width: 100%;
					height: 60rpx;
					border-radius: 20rpx;
					padding: 0 20rpx;
					background-color: aliceblue;

					line-height: 60rpx;
				}

			}

			.modal-operations {
				display: flex;
				justify-content: space-around;
				width: 100%;
				margin-top: 20rpx;

				text-align: center;
			}

			.modal-operations>view {
				font-weight: bold;
				padding: 10rpx;
				border-radius: 4rpx;

				width: 40%;
			}

		}

	}

	.page-btns {
		display: flex;
		position: fixed;
		right: 120rpx;
		bottom: 120rpx;
		z-index: 10;


		.button {
			width: 150rpx;
			height: 150rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			// border: solid #5DACB1;



			border-radius: 50rpx;
			color: white;
		}
	}

	image {
		width: 100%;
		height: 100%;
	}
</style>
